<template>
    <div>
        <div class="banner h-[450px] bg-[#f3faf9] w-full text-center">
            <div
                class="banner-bg pt-[100px] w-[1920px] h-full mx-auto text-center"
            >
                <div
                    class="animate-trigger text-[42px] text-[#262626] font-400"
                >
                    优质的服务，极致健康体验
                </div>
            </div>
        </div>
        <div
            class="w-[1200px] mx-auto py-[60px] flex justify-between flex-wrap gap-[60px]"
        >
            <div
                class="card-item w-[570px] h-[480px] bg-[#fff] animate-trigger"
                v-for="item in items"
                :key="item.time"
            >
                <div class="card-item-img w-[570px] h-[340px] rounded-[12px]">
                    <img w-full h-full :src="item.image" alt="" />
                </div>
                <div class="card-item-content p-[30px]">
                    <div
                        class="card-item-title text-[24px] text-[#262626] mb-[16px]"
                    >
                        {{ item.title }}
                    </div>
                    <div class="card-item-desc text-[#BFBFBF] text-[14px]">
                        {{ item.time }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

import t_1 from '../../assets/images/proactive/t_1.png'
import t_2 from '../../assets/images/proactive/t_2.png'

const items = [
    {
        title: 'ACEHEAL艾斯康新年品鉴会',
        time: '2024-12-24',
        image: t_1
    },
    {
        title: 'ACEHEAL艾斯康湖南工程学院校友会',
        time: '2024-12-31',
        image: t_2
    },
    {
        title: 'ACEHEAL艾斯康新年品鉴会',
        time: '2024-12-21',
        image: t_1
    },
    {
        title: 'ACEHEAL艾斯康湖南工程学院校友会',
        time: '2024-12-11',
        image: t_2
    }
]
const observer = ref<IntersectionObserver | null>(null)

onMounted(() => {
    observer.value = new IntersectionObserver(
        entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-in')
                }
            })
        },
        {
            threshold: 0.1
        }
    )

    document.querySelectorAll('.animate-trigger').forEach(el => {
        observer.value?.observe(el)
    })
})

onUnmounted(() => {
    if (observer.value) {
        observer.value.disconnect()
    }
})
</script>

<style lang="less" scoped>
.banner {
    &-bg {
        background: url('../../assets/images/proactive/banner.png') no-repeat;
        background-size: 1920px 450px;
    }
}
.card-item {
    box-shadow: 0px 50px 24px -40px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

// 文字动画相关样式
.animate-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}
</style>
